<template>
    <div class="accountBar2 p-4 bg-zinc-100 dark:bg-zinc-800">
      <div class="grid grid-cols-4 gap-4 text-center text-zinc-700 dark:text-zinc-300">
        <div v-for="(item, index) in stats" :key="index">
          <div class="text-2xl font-bold">{{ item.count }}</div>
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="mt-6 bg-white dark:bg-zinc-700 rounded-lg p-4">
        <div class="flex justify-between items-center mb-4">
          <div class="mine text-xl font-bold">我的订单</div>
          <div class="all text-zinc-500">全部订单 &gt;</div>
        </div>
        <div class="grid grid-cols-4 gap-4 text-center text-zinc-700 dark:text-zinc-300">
          <div v-for="(orderStatus, idx) in orderStatuses" :key="idx">
            <img :src="orderStatus.icon" :alt="orderStatus.alt" class="mx-auto mb-2">
            <div>{{ orderStatus.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        stats: [
          { count: 0, title: '我的收藏' },
          { count: 0, title: '浏览记录' },
          { count: '¥ 0.00', title: '我的红包' },
          { count: 13, title: '优惠券' },
        ],
        orderStatuses: [
          { icon: 'https://placehold.co/50x50', alt: '待付款', title: '待付款' },
          { icon: 'https://placehold.co/50x50', alt: '待收货', title: '待收货' },
          { icon: 'https://placehold.co/50x50', alt: '评价', title: '评价' },
          { icon: 'https://placehold.co/50x50', alt: '退款/售后', title: '退款/售后' },
        ],
      };
    },
  };
</script>
  
<style scoped>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
.mine{
margin: 0 auto;
}
.all{
margin: 0 auto;
}
</style>